<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我弹的《{{data['score_name']}}》{{data["final"]|float|round(1, 'common')}} 分，不服来战！</title>
    <link rel="stylesheet" href="/static/reset.css">
    <style>
        html {
            background: #0b162e;
        }

        body {
            background: #0b162e;
            color: #7185b4;
        }

        .main {
            position: relative;
            width: 7.5rem;
            min-height: 10.58rem;
            background: url('/static/share_lab/lab_bg.png') center no-repeat;
            background-size: cover;
            padding-top: 1.1rem;
        }

        .main .main-head {
            background: url('/static/share_lab/spot.png') no-repeat;
            background-position: center 0.5rem;
            background-size: 3.72rem 1.11rem;
        }

        .main .main-head p {
            font-size: 0.28rem;
        }

        .main .main-head p:nth-of-type(2) {
            font-size: 0.4rem;
            color: #ffbc00;
        }

        .main .main-head p:nth-of-type(2) span {
            font-size: 1.2rem;
            line-height: 1.4rem;
        }

        .main .main-head p:last-child {
            color: #2c3b5b;
        }

        .main .main-six {
            width: 3.8rem;
            height: 4.28rem;
            margin: 0 auto;
            margin-top: 0.2rem;
        }

        .main .main-score {
            z-index: 2;
            width: 2rem;
            height: 0.6rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 6.2rem;
            margin-left: auto;
            margin-right: auto;
        }

        .main .main-score p {
            font-size: 0.45rem;
            font-weight: bold;
            color: #fff;
            text-align: center;
        }

        .main .main-player {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 7.08rem;
            height: 1.24rem;
            margin-left: auto;
            margin-right: auto;
        }

        .bottom {
            position: relative;
            margin-top: 0.4rem;
            padding-bottom: 0.6rem;
        }

        .bottom p:first-child {
            width: 3.4rem;
            height: 0.8rem;
            background: #ff5e94;
            text-align: center;
            line-height: 0.8rem;
            border-radius: 1rem;
            font-size: 0.32rem;
            color: #0b162e;
            margin-bottom: 0.3rem;
        }

        .bottom a {
            font-size: 0.26rem;
            color: #7185b4;
            border-bottom: 1px solid;
        }

        .white {
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        (function () {
            window.zhuge = window.zhuge || [];
            window.zhuge.methods = "_init identify track getDid getSid getKey setSuperProperty setUserProperties setPlatform".split(" ");
            window.zhuge.factory = function (b) {
                return function () {
                    var a = Array.prototype.slice.call(arguments);
                    a.unshift(b);
                    window.zhuge.push(a);
                    return window.zhuge;
                }
            };
            for (var i = 0; i < window.zhuge.methods.length; i++) {
                var key = window.zhuge.methods[i];
                window.zhuge[key] = window.zhuge.factory(key);
            }
            window.zhuge.load = function (b, x) {
                if (!document.getElementById("zhuge-js")) {
                    var a = document.createElement("script");
                    var verDate = new Date();
                    var verStr = verDate.getFullYear().toString() + verDate.getMonth().toString() + verDate.getDate().toString();

                    a.type = "text/javascript";
                    a.id = "zhuge-js";
                    a.async = !0;
                    a.src = (location.protocol == 'http:' ? "http://sdk.zhugeio.com/zhuge.min.js?v=" : 'https://zgsdk.zhugeio.com/zhuge.min.js?v=') + verStr;
                    a.onerror = function () {
                        window.zhuge.identify = window.zhuge.track = function (ename, props, callback) {
                            if (callback && Object.prototype.toString.call(callback) === '[object Function]') callback();
                        };
                    };
                    var c = document.getElementsByTagName("script")[0];
                    c.parentNode.insertBefore(a, c);
                    window.zhuge._init(b, x)
                }
            };
            var ua = window.navigator.userAgent.toLocaleLowerCase();
            var env = window.location.host.indexOf('dev') > 0 || window.location.host.indexOf('pre') > 0
            var debug = env ? true : false;
            var channel = /micromessenger/.test(ua) ? 'wechat' : /weibo/.test(ua) ? 'weibo' : 'other';
            window.zhuge.load('99944c90bdfe483ab3596e7f99f20c2e', {
                debug: debug,   // 埋点是否实时调试
                platform: { //自定义触发环境信息(选填)
                    '版本': 'v4.2'
                },
                superProperty: { //全局的事件属性(选填)
                    '应用名称': 'The ONE智能钢琴（新）'
                },
                utm: {
                    'utm_source': channel
                },
                autoTrack: true,
                //启用全埋点采集（选填，默认false）
                singlePage: false //是否是单页面应用（SPA），启用autoTrack后生效（选填，默认false）
            });
        })();
    </script>
</head>

<script>
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';
    window.onresize = function (e) {
        document.documentElement.style.fontSize = document.documentElement.offsetWidth / 7.5 + 'px';
    }
</script>

<body>
<style>
    .aplayer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.24rem;
        margin-left: auto;
        margin-right: auto;
        background: #121f3c;
    }

    .aplayer .aplayer-pic {
        height: 0.84rem;
        width: 0.9rem;
        margin:0.2rem;
    }

    .aplayer .aplayer-pic .aplayer-button {
        width: 0.6rem;
        height: 0.6rem;
        border: 2px solid #fff;
        top: 50%;
        left: 48%;
        margin: -0.3rem 0 0 -0.3rem;
        opacity: 1;
    }

    .aplayer .aplayer-pic .aplayer-play .aplayer-icon {
        position: absolute;
        top: 0;
        left: 0.05rem;
        height: 0.6rem;
        width: 0.6rem;
    }

    .aplayer .aplayer-pic .aplayer-button .aplayer-fill {
        fill: #ffffff;
    }

    .aplayer .aplayer-pic .aplayer-button .aplayer-icon-pause {
        height: 0.56rem;
        width: 0.56rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -0.28rem;
        margin-left: -0.28rem;
    }

    .aplayer-icon {
        color: #ffffff;
    }

    .aplayer-icon:before {
        display: none !important;
    }

    .aplayer .aplayer-info {
        position: absolute;
        left: 1.35rem;
        top: 0.2rem;
        bottom: 0.2rem;
        height: 0.86rem;
        width: 5.7rem;
        margin: 0 !important;
        padding: 0 !important;
        padding-left: 0.2rem !important;
        border-left:1px solid #273454;
    }

    .aplayer .aplayer-info .aplayer-music {
        margin: 0 !important;
        padding: 0 !important;
        position: absolute;
        left: 0.24rem;
        top: 0.45rem;
        color: #fff;
        font-size: 0.24rem;
    }
    .aplayer .aplayer-info .aplayer-music .aplayer-author{
        display: none;
    }
    .aplayer .aplayer-info .aplayer-music .aplayer-title{
        color:#546690;
        font-size:0.24rem;
    }
    .aplayer .aplayer-info .aplayer-controller {
        margin-top: 0.15rem;
        display: block;
    }

    .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
        height: 0.02rem;
    }
    .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{
        background: #ff5e94 !important;
    }
    .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
        margin-top: -0.17rem;
        width: 0;
        height: 0;
        display: block;
        padding: 0.07rem;
        background: red;
        border: 0.12rem #fff solid !important;
    }

    .aplayer .aplayer-info .aplayer-controller .aplayer-time {
        margin: 0 !important;
        padding: 0 !important;
        position: absolute;
        right: -0.1rem;
        top: 0.35rem;
        color:#546690;
        font-size: 0.24rem;
    }

    .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
        display: none;
    }
</style>
<div class="main">
    <div class="main-head" align="center">
        {% if data['type'] | int !=3 %}
        <p>- 排名 -</p>
        <p>第
            <span id="rank">{{data["rank"]}}</span> 名</p>
        <p>
            <span id="user_name">{{data["user_name"]}}</span>演奏的《
            <span id="song_name">{{data["score_name"]}}</span>》</p>
        <p>击败了全国
            <span id="beat_rate">{{ data["beat_rate"]|float|round(3, 'common') * 100 }}</span>％ 的用户</p>
        {% else %}
        <p>- 总得分 -</p>
        <p>
            <span id="final">{{data["final"]|float|round(1, 'common')}}</span>
        </p>
        <p>
            《<span id="song_name_1">{{data["score_name"]}}</span>》
            <br>
            <span id="user_name_1">{{data["user_name"]}}</span>
        </p>
        <p style="opacity: 0;">击败</p>
        {% endif %}
        <p>—————</p>
    </div>
    {% if data['type'] | int !=3 %}
    <div class="main-score">
        <p id="score">{{data["final"]|float|round(1, 'common')}}</p>
    </div>
    {% endif %}
    <div class="main-six" id="case-six">
    </div>
    <div class="main-container">
        <div id="player" class="aplayer"></div>
    </div>
</div>
<div class="bottom" align="center">
    <p id="btn">立即挑战</p>
    <a class="bottom-a" href="https://shop203084.youzan.com/v2/showcase/homepage?alias=rddonayh&sf=wx_sm" id="openShop">有TheONE智能钢琴才能挑战哦!</a>
</div>
<script src="/static/APlayer.min.js"></script>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/util.js"></script>
<script>
    var showPlayer = "{{data['mp3_url']}}" ? true : false;
    if (showPlayer) {
         var timer = setTimeout(() => {
            xmlHttp("{{data['mp3_url']}}")
        }, 500)

        function xmlHttp(url) {
            var xml = new XMLHttpRequest()
            xml.open('get', url, true)
            xml.send(null)
            xml.onreadystatechange = function () {
                if (xml.readyState === 4) {
                    if (xml.status !== 404) {
                        clearTimeout(timer)
                        timer = null
                        load.style.display = 'none'
                    }
                }
            }
        }
    } else {
        document.getElementById('player').style.display = 'none'
    }

    var chartCon = document.getElementById('case-six');
    var score = {
        'beat_rate': '{{data["beat_rate"]}}',
        'complete': '{{data["complete"]}}',
        'difficulty': '{{data["difficulty"]}}',
        'expressive': '{{data["expressive"]}}',
        'final': '{{data["final"]}}',
        'pitch': '{{data["pitch"]}}',
        'rank': '{{data["rank"]}}',
        'rate': '{{data["rate"]}}',
        'rhythm_speed': '{{data["rhythm_speed"]}}',
        'technique': '{{data["technique"]}}',
    }
    renderChart(chartCon, score, '#fff', false);
    function renderChart(element, data, fontColor='#ffffff', isBackWhite=true) {
        isPhone = window.innerWidth <= 812;
        nameStyle = {
            nameFontSize: isPhone ? 9 : 12,
            nameGap: isPhone ? 3 : 13,
            symbolSize: isPhone ? 3 : 4,
        };
        radarStyle = {
            splitLineColor: isBackWhite ? '#fff' : 'transparent',
            splitAreaColor: isBackWhite ? '#f1f1f1' : '#232e44',
            axisLineColor: isBackWhite ? '#fff' : 'rgba(255, 255, 255, 0.8)'
        };
        option = {
            radar: {
                name: {
                    textStyle: {
                        color: fontColor,
                        fontSize: nameStyle.nameFontSize
                    }
                },
                nameGap: nameStyle.nameGap,
                indicator: [
                    {name: `完整性\n${Math.round(data.complete)}`, max: 100},
                    {name: `难度\n${Math.round(data.difficulty)}`, max: 100},
                    {name: `技巧\n${Math.round(data.technique)}`, max: 100},
                    {name: `表现力\n${Math.round(data.expressive)}`, max: 100},
                    {name: `节奏\n${Math.round(data.rhythm_speed)}`, max: 100},
                    {name: `音准\n${Math.round(data.pitch)}`, max: 100}
                ],
                splitArea: {
                    areaStyle: {
                        color: [radarStyle.splitAreaColor]
                    }
                },
                axisLine: {
                    lineStyle: {
                        // color:'#fff'
                        color: radarStyle.axisLineColor
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#2c3b5b'
                        // color: radarStyle.splitLineColor
                    }
                }
            },
            series: [{
                name: '最终得分',
                type: 'radar',
                symbol: 'circle',
                symbolSize: nameStyle.symbolSize,
                // areaStyle: {normal: {}},
                lineStyle: {
                    normal: {
                        color: '#ff5e94'
                    }
                },
                areaStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#232e44' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#ff5e94' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    }
                },
                data: [
                    {
                        value: [Math.round(data.complete),
                            Math.round(data.difficulty),
                            Math.round(data.technique),
                            Math.round(data.expressive),
                            Math.round(data.rhythm_speed),
                            Math.round(data.pitch)],
                        name: '最终得分'
                    }
                ]
            }]
        };
        echarts.init(element).setOption(option);
    }
</script>
<script>
    var btn = document.querySelector('#btn')
    var openShop = document.querySelector('#openShop')
    var ua = window.navigator.userAgent.toLocaleLowerCase()
    var isAndroid = /android/.test(ua)
    var isIOS = /ipad|iphone|ipod/.test(ua)
    var score_name = "{{data['score_name']}}";
    var channel = /micromessenger/.test(ua) ? 'wechat' : /weibo/.test(ua) ? 'weibo' : 'other';
    var universalLink = "{{ data['app_url'] }}"
    var isWX = /micromessenger/.test(ua)
    var rank = "{{data['rank']}}"
    var final = "{{data['final']|float|round(2, 'ceil')}}"
    var type = "{{data['type']}}"
    var scoreName = "{{data['score_name']}}"
    var searches = window.location.search.split('?')[1].split('&')
    var playData = searches.filter(function(item) {
        return item.indexOf('playData') > -1
    })
    var param = 0
    if (playData.length > 0) {
        param = playData[0].split('=')[1]
    }
    type = type == '3' ? '学单曲' : '评测'

    universalLink = formatUrl(universalLink)

    universalLink = universalLink + '&from=' + encodeURIComponent(channel) + '&from_page=' + encodeURIComponent('实验室单曲') + '&param=' + encodeURIComponent(param);

    zhuge.track('点击分享链接', {
        '分享内容': '评测',
        '分享渠道': channel
    })

    btn.addEventListener('click', function () {
        zhuge.track('评测分享页-点击立即挑战', {
            '单曲名称': score_name,
            '分享渠道': channel,
            '得分': final,
            '排名': rank
        }, function () {
            window.location.href = universalLink;
        })
    }, false)
    openShop.addEventListener('click', function () {
        zhuge.track('六向图分享页-点击商城购买链接', {
            '单曲名称': score_name,
            '分享渠道': channel,
            '来源': type,
            '得分': final,
            '曲目名': scoreName
        })
    }, false)

    zhuge.track('进入六向图分享页', {
        '来源': type,
        '得分': final,
        '曲目名': scoreName
    })

    var player = new APlayer({
            element: document.getElementById('player'),
            narrow: false,
            autoplay: false,
            showlrc: false,
            preload: 'auto',
            mode: 'loop',
            music: {
                url: "{{data['mp3_url']}}",
                pic: "/static/exam.jpg"
            }
        })
    var displayName = scoreName.length < 15 ? scoreName : (scoreName.substring(0, 16) + '...');
    $('#song_name').text(displayName);
    $('.aplayer-title').text(displayName);
</script>
</body>

</html>